<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>


  <div class="avue-contail"
       :class="{'avue--collapse':isCollapse,}">
    <div class="avue-layout"
         :class="{'avue-layout--horizontal':true}">
      <div class="avue-sidebar" >
        <!-- 左侧导航栏 -->
        <logo />
        <el-scrollbar class="avue-menu">
          <el-menu unique-opened
                   :default-active="activeMenu"
                   :mode="vertical"
                   :collapse="getScreen(isCollapse)">
            <template v-for="item in menu[0].children">
              <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item) && item.hide==0 &&( item.nav==1||  item.nav==4)"
                            :index="getPath(item)"
                             @click="open(item)"
                            :key="item[labelKey]">
<!--                <i :class="item[iconKey]"></i>-->
                <template #title>
                  <span :alt="item[pathKey]">{{getTitle(item)}}</span>
                </template>
              </el-menu-item>
            </template>
          </el-menu>
        </el-scrollbar>


          <div class="top-user">

              <img class="top-bar__img"
                   :src="userInfo.avatar||'https://avatar.gitee.com/uploads/61/632261_smallweigit.jpg!avatar100?1518660401'">
              <el-dropdown>

          <span class="el-dropdown-link" >
              <p  v-if="userInfo.id">
                    {{userInfo.displayName||userInfo.phone||"匿名"}}
              </p>
                <div v-if="!userInfo.id" >  <router-link to="/login" style="color: white;">登录</router-link></div>
          </span>

                  <template #dropdown v-if="userInfo.id">
                      <el-dropdown-menu>

                          <el-dropdown-item>
                              <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
                          </el-dropdown-item>


                          <el-dropdown-item  v-if="userInfo.id" @click="logout"
                                            divided>{{$t('navbar.logOut')}}</el-dropdown-item>
                      </el-dropdown-menu>

                  </template>
              </el-dropdown>
              <top-setting></top-setting>


          </div>

      </div>


      <div class="avue-main">
        <!-- 主体视图层 -->
        <div id="avue-view">
          <router-view #="{ Component }">
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
        <!-- 占位容器 -->
<!--          <div class="placegolder-container" ></div>-->


<!--          <div class="m-side-operation" style="visibility: visible;">-->
<!--              <div class="side-service-item">-->
<!--                  <a id="im_Bn" class="item-link-block talk" href="javascript:void(0)">-->
<!--                      <i class="side-service-icon icon-message"></i>-->
<!--                      <span class="item-hover-text scrtop-text">聊天互动</span>-->
<!--                  </a>-->
<!--              </div>-->
<!--              <div class="line-wrap">-->
<!--                  <div class="line"></div>-->
<!--              </div>-->
<!--              <div class="side-service-item">-->
<!--                  <a href="/index/toAppDownload.action" target="_blank" class="item-link-block app-download">-->
<!--                      <i class="side-service-icon phone-icon"></i>-->
<!--                      <span class="item-hover-text feedback-text">移动课堂</span>-->
<!--                      <div class="qrcode-bubble"><div class="qrcode"><div class="download"><img src="/statics/res/images/iosAndAndroidAppDownload.png"><p>下载App</p></div><div class="follow-weixin"><img src="/statics/res/images/weixincode.png"><p>关注微信</p></div></div><div class="arrow"><div class="arrow-border"></div><div class="arrow-cnt"></div></div></div>-->
<!--                  </a>-->
<!--              </div>-->

<!--              <div class="line-wrap"><div class="line"></div></div>-->
<!--              <div class="side-service-item">-->
<!--                  <a class="item-link-block side-service-top" href="javascript:void(0)">-->
<!--                      <i class="side-service-icon top-icon"></i>-->
<!--                      <span class="item-hover-text scrtop-text">返回顶部</span>-->
<!--                  </a>-->
<!--              </div>-->

<!--          </div>-->




        <div class="avue-footer"  v-show="showfooter">
            <div class="footer">
                <div class="container clearfix">
                    <div class="about_left pull-left">
                        <div class="footer_link">
                            <h4>友情链接：</h4>
                            <a href="#">教育部</a>
                            <a href="#">学信网</a>
                            <a href="#">阿里云</a>
                            <a href="#">七牛云</a>
                        </div>
                        <div class="about_link">
                            <a href="#">关于我们</a>
                            <a href="#">产品服务</a>
                            <a href="#">学校入驻</a>
                            <a href="#">用户指南</a>
                            <a href="#">加入我们</a>
                            <a href="#">联系我们</a>
                            <a href="#">意见反馈</a>
                        </div>
                        <div class="footer_copy">
                            <p>{{website.copyright}}&nbsp;&nbsp;&nbsp;&nbsp;<a href="">{{website.companyCopyright}}</a></p><p>
                        </p></div>
                    </div>
                    <div class="about_server pull-left">
                        <p>客服热线 （每日9:00-18:00）</p>
                        <span title="24小时客服热线{{website.companyPhone}}" alt="24小时客服热线{{website.companyPhone}}">{{website.companyPhone}}</span>
                        <p class="follow">关注我们：<a href="#" class="weibo"></a><a href="#" class="wechat"></a></p>
                        <p class="mail">邮箱：<a href="mailto:{{website.companyEmail}}">{{website.companyEmail}}</a></p>
                    </div>
                </div>
            </div>
        </div>

      </div>
    </div>


      <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
          <div
                  style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
          >
              UP
          </div>
      </el-backtop>

  </div>


</template>

<script>
import index from '@/framework-core/mixins/index'
import { mapGetters } from "vuex";
import logo from "@/framework-core/page/index/logo.vue";
import website from '@/framework-core/config/website'
import { validatenull } from '@/framework-core/utils/validate'
import {getStore, setStore} from '@/framework-core/utils/store'

export default {
  mixins: [index],
  components: {
    top,
    logo
  },
  name: "index",
  provide () {
    return {
      index: this
    };
  },
  data () {
    return {
        props: website.menu
    }
  },
  computed: {
    ...mapGetters(["isRefresh", "isLock", "isCollapse", "isSearch", "menu",  "userInfo","setting"]),
      showfooter() {
          if(this.closeFooters){
              for(var i=0;i<this.closeFooters.length;i++){
                  if(this.$route.path.indexOf(this.closeFooters[i])>=0){
                      return false;
                  }
              }
          }
          return  true;
      },

    validSidebar () {
      this.$route.meta = {"topbar":false,"sideba":"horizontal"}
      return !((this.$route.meta || {}).menu == false || (this.$route.query || {}).menu == 'false')
    },
    labelKey () {
      return this.props.label
    },
    pathKey () {
      return this.props.path
    },
    queryKey () {
      return this.props.query
    },
    iconKey () {
      return this.props.icon
    },
    childrenKey () {
      return this.props.children
    },
    activeMenu () {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    }
  },
  props: [],
  methods: {
    getPath(item) {
      return item[this.pathKey]
    },
    getTitle(item) {
      return this.$router.$avueRouter.generateTitle(item, this.props);
    },
    validRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    open(item) {
      this.$router.push({
        path: item[this.pathKey],
        query: item[this.queryKey]
      });

    },
      logout () {
          this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
              confirmButtonText: this.$t("submitText"),
              cancelButtonText: this.$t("cancelText"),
              type: "warning"
          }).then(() => {
              this.$store.dispatch("LogOut").then(() => {
                  this.$router.push({ path: "/login" });
              });
          });
      },
    //打开菜单
    openMenu (item = {}) {
      this.$store.dispatch("GetMenu", item.parentId).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单做的事件
        if (!validatenull(item)) {
          let itemActive = {},
                  childItemActive = 0;
          //vue-router路由
          if (item.path) {
            itemActive = item;
          } else {
            if (this.menu[childItemActive].length == 0) {
              itemActive = this.menu[childItemActive];
            } else {
              itemActive = this.menu[childItemActive].children[childItemActive];
            }
          }
          this.$store.commit('SET_MENUID', item);
          this.$router.push({
            path: itemActive.path
          });
        }

      });
    }
  }
};
</script>

<style lang="scss" scoped>

    .avue-contail {
        height: auto !important;
    }

    .avue-main {
        display: grid !important;
        min-height: 867px;
    }
  .placegolder-container {
    height: 70px;
  }

  .avue-sidebar {
      background-color: #031527;
  }

  .el-menu-item{
    display: inline;
  }
  .bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px -1px 1px #e6e6e6;
    background-color: #fff;

    .tabs-item {
      padding: 5px 0;
      flex: 1;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .tab-icon {
        width: 30px;
        height: 30px;
        border-radius: 4px;
      }

      .tab-text {
        font-size: 11px;

        &.active {
          color: blue;
        }
      }
    }
  }

  .container {
      width: 1200px;
      margin: 0 auto;
      padding: 0;
      max-width: none !important;
      text-align: left;
  }

  .pull-left {
      float: left !important;
  }
  /*
footer公用
*/
  .footer {
      background: #252d31;
      padding: 10px 0;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .footer .footer_link h4 {
      margin-bottom: 10px;
  }
  .footer .footer_link h4,
  .footer a {
      color: #ffffff;
      font-size: 12px;
  }
  .footer .footer_link h4 {
      margin-top: 0;
  }
  .footer .footer_link a {
      padding-right: 35px;
      color: #aaa;
  }
  .footer a:hover {
      color: #00af63;
  }
  .footer .about_link {
      padding-top: 10px;
      font-size: 12px;
  }
  .footer .about_link a {
      padding-right: 20px;
  }
  .footer .footer_copy {
      padding-top: 0px;
  }
  .footer .footer_copy p {
      font-size: 10px;
      color: #fff;
  }
  .footer .adout_erweima {
      margin-left: 40px;
  }
  .footer .adout_erweima img {
      width: 110px;
      height: 110px;
      overflow: hidden;
  }
  .footer .adout_erweima dl {
      margin-bottom: 0;
      float: left;
      margin-right: 50px;
  }
  .footer .adout_erweima dl dt {
      text-align: center;
      color: #ffffff;
      padding-top: 2px;
      font-weight: normal;
  }
  .footer .about_server {
      color: #fff;
      margin-left: 250px;
      font-size: 12px;
  }
  .footer .about_server span {
      font-size: 15px;
  }
  .footer .about_server p {
      margin-bottom: 0;
  }
  .footer .about_server .mail {
      margin-top: 10px;
  }
  /*.footer .about_server .weibo {*/
  /*    width: 20px;*/
  /*    height: 20px;*/
  /*    display: inline-block;*/
  /*    position: relative;*/
  /*    top: 6px;*/
  /*    background: url("../res/img_new/weibo.png?v=b117dbbf9b?v=b117dbbf9b") no-repeat;*/
  /*}*/
  /*.footer .about_server .wechat {*/
  /*    width: 20px;*/
  /*    height: 20px;*/
  /*    display: inline-block;*/
  /*    position: relative;*/
  /*    top: 6px;*/
  /*    background: url("../res/img_new/wechat.png?v=02a851b70c?v=02a851b70c") no-repeat;*/
  /*}*/
  .footer .about_server .follow a {
      margin: 0 5px;
  }



  .m-side-operation{
      position: fixed;
      right: 30px;
      bottom: 140px;
      z-index: 1000;
      font-size: 14px;
      border: 1px solid #ccc;
      background: #fff;
      width: 62px;
      border-radius: 6px;
  }
  .side-service-item {
      width: 60px;
      height: 60px;
  }
  .item-link-block {
      position: relative;
      width: 60px;
      height: 60px;
      display: inline-block;
  }
  .side-service-icon {
      background: url(/img/side.png) no-repeat 0 0;
      position: absolute;
      width: 30px;
      height: 30px;
  }
  .item-link-block:hover .side-service-icon {
      display: none;
  }
  .icon-message{
      background-position: 0 0;
      top: 16px;
      left: 16px;
  }
  .m-side-operation .side-service-item .talk:hover {
      border-radius: 5px 5px 0 0;
      background-color: #39a030;

  }
  .phone-icon {
      background-position: 0 -57px;
      top: 16px;
      left: 20px;
  }
  .item-hover-text {
      display: none;
      text-align: center;
      padding: 10px 15px;
      background-color: #39a030;
      color: #fff;
      height: 60px;
  }
  .item-link-block:hover .item-hover-text {
      display: block;
  }
  .feedback-text {
      border-radius: 6px 6px 0 0;
  }
  .top-icon {
      background-position: 0 -112px;
      top: 13px;
      left: 16px;
  }
  .line-wrap {
      width: 60px;
      text-align: center;
      font-size: 0;
  }
  .scrtop-text {
      border-radius: 0 0 6px 6px;
  }
  .line {
      width: 50px;
      /*height: 1px;*/
      border-top: 1px solid #ccc;
      display: inline-block;
  }
  .m-side-operation .side-service-item .item-link-block {
      position: relative;
      width: 60px;
      height: 60px;
      display: inline-block;
      text-align: center;
      color: #666;
  }
  .m-side-operation .side-service-item .item-link-block {
      position: relative;
      width: 60px;
      height: 60px;
      display: inline-block;
      text-align: center;
      color: #666;
  }
  .m-side-operation .side-service-item .item-link-block .f-icon {
      font-size: 32px;
      line-height: 60px;
  }
  .m-side-operation .side-service-item .item-link-block .qrcode-bubble {
      display: none;
      z-index: 100000;
  }
  .m-side-operation .side-service-item .item-link-block .qrcode-bubble .qrcode {
      border: 1px solid #ccc;
      position: absolute;
      right: 60px;
      top: -30px;
      width: 214px;
      padding: 10px 0 6px 12px;
      background-color: #fff;
      border-radius: 3px;
      text-align: center;
  }
  .m-side-operation .side-service-item .item-link-block .qrcode-bubble .qrcode .download, .m-side-operation .side-service-item .item-link-block .qrcode-bubble .qrcode .follow-weixin {
      float: left;
      width: 90px;
      color: #666;
      margin-right: 10px;
  }
  .m-side-operation .side-service-item .item-link-block .qrcode-bubble .qrcode .download img, .m-side-operation .side-service-item .item-link-block .qrcode-bubble .qrcode .follow-weixin img {
      width: 90px;
      height: 90px;
  }
  .m-side-operation .side-service-item .item-link-block .arrow .arrow-border {
      border-left-color: #ccc;
  }
  .m-side-operation .side-service-item .item-link-block .arrow .arrow-cnt, .m-side-operation .side-service-item .item-link-block .arrow .arrow-border {
      display: block;
      position: absolute;
      top: 27px;
      border-width: 7px 4px;
      border-style: solid;
      border-color: transparent transparent transparent #fff;
  }
  .m-side-operation .side-service-item .item-link-block .arrow .arrow-cnt {
      left: 0px;
  }
  .m-side-operation .side-service-item .app-download:hover .qrcode-bubble {
      display: block;
  }

    .avue-footer {
        width: 100%;
        position: relative!important;
        bottom: 0;
        text-align: center;
    }
</style>
